/**
 * 跨多级组件通信：Context对象
 * 步骤：
 *  1. 调用 React.createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件
 *  2. 使用 Provider 组件作为父节点。
 *  3. 设置 value 属性，表示要传递的数据。
 *  4. 调用 Consumer 组件接收数据
 */

import React, { Component } from 'react';


// 可以单独放到一个js文件
const ShareA = React.createContext();
console.log(ShareA)




// 孙子组件
const Fnc = () => {
  return (
    <div>
      <h3>孙子组件</h3>
      {/* 接收祖先组件的数据 */}
      <ShareA.Consumer>{(data) => {
        console.log('接收祖先组件的数据:', data);
        return <p>{data}</p>
      }}</ShareA.Consumer>
    </div>
  )
}

// 子组件
class Child extends Component {
  render() {
    return (
      <div>
        <h2>子组件</h2>
        <Fnc />

        <ShareA.Consumer>{(data) => {
          console.log('接收父组件的数据:', data);
          return <p style={{ color: 'red' }}>{data}</p>
        }}</ShareA.Consumer>
      </div>
    );
  }
}


//  根组件
class App extends Component {

  state = {
    a: 1
  }

  render() {
    return (
      <div>
        <h1>根组件</h1>
        <hr />
        <ShareA.Provider value={this.state.a}>

          <Child />

        </ShareA.Provider>

      </div>
    );
  }
}

export default App;